<template>
	<view class="video-upload-class">
		<!-- 已选择的视频文件 -->
		<view class="vu-listcontainer">
			<view v-for="(item, index) in fileList" :key="index" class="vu-video-ct" :style="{ 'background-color': item.status === 'uploading' ? '#74b4ff' : item.status === 'error' ? '#bbbbbb' : '' }">
				<!-- <video id="myVideo" :src="item.phoneStorage" autoplay loop controls="false" style="height: 100%;width: 100%;"></video> -->
				<!-- 上传成功显示 -->
				<view v-if="item.status === 'success'" class="vu-video-item" @click="playVideo(item)">
					<u-icon name="play-circle-fill" color="#ffffff" size="40"></u-icon>
					<view class="vu-videoname">
						<view>视频名称:</view>
						<view class="vu-namedetail">{{ item.videoName }}</view>
					</view>
					<view class="vu-time">
						<text>时长:</text>
						<text class="vu-video-text">{{ item.duration }}</text>
					</view>
					<text>s</text>
				</view>
				<!-- 上传中 -->
				<view v-else-if="item.status === 'uploading'" class="vu-video-item">
					<u-loading mode="circle" size="40"></u-loading>
					<view class="vu-videoname">
						<text>{{ item.message }}</text>
					</view>
				</view>
				<!-- 上传出错 -->
				<view v-else-if="item.status === 'error'" class="vu-video-item">
					<u-icon name="error-circle-fill" color="#ffffff" size="40"></u-icon>
					<view class="vu-videoname">
						<text>{{ item.message }}</text>
					</view>
				</view>
				<!-- 删除视频按钮 -->
				<view class="vu-video-detele" @click="deleteSingleVideo(item)">
					<u-icon name="close" color="#ffffff" size="24"></u-icon>
				</view>
			</view>
		</view>
		<!-- 上传视频按钮: 选择/拍摄 -->
		<view class="vu-operate">
			<view class="vu-button vu-album-button" @click="chooseVideo('album')">
				<image mode="aspectFit" src="/static/image/commonImages/xiangcevideo.svg"></image>
				<text class="vu-btn-text">相册选择</text>
			</view>
			<view class="vu-button vu-camera-button" @click="chooseVideo('camera')">
				<image mode="aspectFit" src="/static/image/commonImages/luxiangupload.svg"></image>
				<text class="vu-btn-text">录像上传</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadUrl
	} from '@/api/orderp/helperOrderp.js'
	import {
		mapState,
	} from "vuex";

	export default {
		props: {
			fileList: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
			}
		},
		methods: {
			// 选择视频
			chooseVideo(chooseType) {
				uni.chooseVideo({
					sourceType: [chooseType],
					// 拍摄最长时间
					maxDuration: 60,
					success: res => {
						console.log('视频选择完成: ', res)
						// 上传的文件对象
						const file = {
							status: 'uploading',
							message: '上传中...',
							url: res.tempFilePath,
							// 存在手机的地址, 用来发送请求
							phoneStorage: res.tempFilePath,
							duration: Number(res.duration).toFixed(1),
							videoName: res.tempFilePath.split('/').pop()
						}
						this.fileList.push(file)
						// 上传文件请求
						this.requestUpLoadFile(res.tempFilePath).then(response => {
							// console.log('上传结果: ', response)
							file.status = 'success'
							file.message = '视频上传成功'
							file.url = response
						}).catch(err => {
							file.status = 'error'
							file.message = '视频上传失败!'
							file.url = file.phoneStorage = ''
						})
					}
				})
			},
			// 上传文件
			requestUpLoadFile(filePath) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						// url: uploadUrl,
						url: uploadUrl,
						filePath,
						header: {
							Authorization: this.userInfo.token
						},
						name: 'file',
						formData: {
							itemId: 'video-gongdan'
						},
						success: (uploadFileRes) => {
							if (uploadFileRes.statusCode == 200) {
								resolve(JSON.parse(uploadFileRes.data).data)
							} else {
								reject('上传失败')
							}
						},
						fail: err => {
							console.log(err)
							reject(err)
						}
					});
				})
			},
			// 删除单个视频
			deleteSingleVideo(video) {
				const idx = this.fileList.indexOf(video)
				this.fileList.splice(idx, 1)
			},
			// 播放视频
			playVideo(item) {
				uni.navigateTo({
					url: `/pages/videoPlayer/index?src=${item.phoneStorage}`,
					animationType: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-upload-class {
		line-height: 1;

		.vu-listcontainer {
			padding-top: 10rpx;

			.vu-video-ct {
				width: 690rpx;
				height: 52rpx;
				background-color: #137EFB;
				border-radius: 30rpx;
				margin-bottom: 10rpx;
				position: relative;
				display: flex;
				align-items: center;

				.vu-video-item {
					width: 100%;
					padding: 6rpx 60rpx 6rpx 8rpx;
					color: #FFFFFF;
					font-size: 26rpx;
					display: flex;
					align-items: center;
					white-space: nowrap;
					position: relative;
					overflow: hidden;
				}

				.vu-videoname {
					display: flex;
					flex: 1;
					overflow: hidden;
					padding-left: 20rpx;

					.vu-namedetail {
						padding-left: 10rpx;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.vu-time {
					padding-left: 20rpx;
				}

				.vu-video-text {
					padding-left: 10rpx;
				}

				.vu-video-detele {
					position: absolute;
					right: 8rpx;
					top: 50%;
					bottom: 0;
					transform: translateY(-50%);
					background-color: #ff5555;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.vu-operate {
			display: flex;

			.vu-button {
				width: 135rpx;
				height: 135rpx;
				background-color: #f7f7f7;
				border-radius: 10rpx;
				border: 1rpx #e5e5e5 solid !important;
				box-sizing: border-box;
				margin: 10rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 20rpx;

				.vu-btn-text {
					font-size: 24rpx;
					padding-top: 6rpx;
					color: #558bab;
				}
			}

			.vu-album-button {
				image {
					width: 60rpx;
					height: 60rpx;
					flex-shrink: 0;
				}
			}

			.vu-camera-button {
				image {
					width: 60rpx;
					height: 60rpx;
					flex-shrink: 0;
				}
			}
		}
	}
</style>
